<template>
	<view>
		<u-row justify="flex-start" gutter="10" v-for="(item,index) in dataList" :key="index" class="bg"
			align="flex-start">
			<u-col span="2.3" style="position: relative;">
				<view style="position:relative;" @click="viewAvatar(item.avatar)">
					<view v-if="item.isGood" class="good-view">优</view>
					<image :src="item.avatar" class="tech-image" ></image>
					<image v-if="index == 0" src="../../static/style/border.gif" class="border-image"></image>
					<image v-if="index == 1" src="../../static/style/hot.gif" class="hot-image"></image>
					<image v-if="index == 2" src="../../static/style/fire.gif" class="fire-image"></image>
				</view>
				<view class="status-view" v-if="item.technician_status == 2">
					可预约
				</view>
				<view class="status-view" v-if="item.technician_status == 1">
					可服务
				</view>
				<view class="status-view1" v-if="item.technician_status == 0" style="color: red;">
				  休息中
				</view>
				<view class="dfix">
					<u-icon name="chat" label="评价" @click="pingjia(item)"></u-icon>
					<u-icon name="calendar" label="详情" @click="detail(item.id)"></u-icon>
				</view>
			</u-col>
			<u-col span="6">
				<view class="center-col">
					<view style="display: flex;align-items: center;">
						<view class="project-title">{{item.technician_username}}</view>
						<view style="margin-left: 10rpx;margin-top: 8rpx;">
							<u-tag type="success" size="mini" text="更多照片" shape="square" bgColor="#24c373" color="#fff"
								borderColor="#24c373" @click="yulan(index)"
								:customStyle="{'margin-left':'10rpx','height':'32rpx','line-height':'32rpx','font-size':'20rpx'}">
							</u-tag>
						</view>
					</view>
					<view style="display: flex;align-items: center;">
						<u-icon name="star-fill" label="5.0" color="red" labelColor="red" size="30" labelSize="30">
						</u-icon>
						<view class="order-view">
							已服务：<label style="font-weight: bold;color:#7f7f7f;">{{item.service_nums || 0}}</label>单
						</view>
					</view>
					<!--<view class="info-view">
						<u-icon name="home" label="素珍商家" labelColor="#999" color="#999" size="18" labelSize="12">
						</u-icon>
						<u-icon name="chat" label="89" labelColor="#999" color="#999" size="18" labelSize="12"></u-icon>
						<u-icon name="heart" label="1426" labelColor="#999" color="#999" size="18" labelSize="12">
						</u-icon>
					</view>-->
				</view>
			</u-col>
			<u-col span="3.6">
				<view class="right-view">
					<view class="status-view timer">
						最早可约{{item.earliest_available || '00:00'}}
					</view>
				</view>
				<view class="right-view" style="margin-top:10rpx;">
					<u-icon name="map-fill" :label="item.distance" color="#24c373" labelSize="15" labelColor="#000"></u-icon>
				</view>
				<view class="right-view" style="margin-top:10rpx;font-size: 15px;">
					{{item.journey}}
				</view>
				<view class="right-view" style="margin-top: 10rpx;">
					<view class="button-view" @click="yuyue(item)" v-if="item.technician_status > 0">
						立即预约
					</view>
					<view class="button-view1" v-else>
						立即预约
					</view>
				</view>
			</u-col>
		</u-row>

		
		<u-popup v-model="show" @close="close" round="10" mode="bottom" style="top: 50px;">
			<view style="width:94%;margin:0 auto;">
				<view style="width:100%;height: 1100rpx;">
					<view class="personal">
						<view style="width:30%;text-align: center;">
							<image :src="item.avatar" class="personal-image"></image>
						</view>
						<view style="flex-grow: 1;">
							<view class="personal-top personal-base">
								<label style="font-weight: bold;font-size: 30rpx;">
									{{ item.technician_username }}
								</label>
								<label style="font-size: 24rpx;color:red;">
									5.0分
								</label>
							</view>
							<view class="personal-center personal-base">
							性格开朗,很高兴为您服务，欢迎预约
							</view>
							<view class="personal-bottom personal-base">
								<u-icon name="account-fill" label="实名认证" color="#24c373" labelColor="#24c373" size="14" labelSize="12"></u-icon>
								<u-icon name="file-text-fill" label="爽约包退" color="#24c373" labelColor="#24c373" size="14" labelSize="12"></u-icon>
								<u-icon name="photo-fill" label="资格证书" color="#24c373" labelColor="#24c373" size="14" labelSize="12" @click="to('/pages/teacher/certificate',{})"></u-icon>
							</view>
						</view>
					</view>
					<scroll-view  scroll-y class="content_box">
						<u-row justify="flex-start" gutter="10" v-for="(item,index) in projectList" :key="index"
						class="bg-list"
						align="flex-start">
						<u-col span="3.5" :customStyle="{'text-align':'center'}">
							<image :src="item.thumb" class="project-image"></image>
						</u-col>
						<u-col span="6" :customStyle="{'margin-left':'10rpx'}">
							<view
								style="display: flex;flex-direction: column;justify-content: space-between;height:120rpx;">
								<view class="project-title">{{item.title}}
								</view>
								<view class="num-view" style="display: flex">
								  超{{item.sales}}人选择
								  <view style="margin-left: 20rpx;">
									<u-icon name="clock" size="13" color="#999" labelSize="10"
											:label="item.service_time+'分钟'" labelColor="#999"></u-icon>
								  </view>
								</view>
								<view class="project-price">
									<view class="rmb-icon">￥</view>
									<view class="price-true">{{item.price}}</view>
									
								</view>
							</view>
						</u-col>
						<u-col span="4.2" justify="center" style="position: absolute;
						right: 15px;
						background: #24c373;
						color: white;
						padding: 5px;
						border-radius: 5px;" @click="xidan(index)">
							去下单
						</u-col>
					</u-row>
				</scroll-view>
					<view style="width:100%;height: 120rpx;"></view>
				</view>
			</view>
		</u-popup>
		
		
		<u-popup v-model="plshow" @close="plclose" round="10" mode="bottom">
			<view style="width:94%;margin:0 auto;">
				<view class="personal">
					<view style="width:30%;text-align: center;">
						<image :src="item.avatar" class="personal-image"></image>
					</view>
					<view style="flex-grow: 1;">
						<view class="personal-top personal-base">
							<label style="font-weight: bold;font-size: 30rpx;">
								{{ item.technician_username }}
							</label>
							<label style="font-size: 24rpx;color:red;">
								5.0分
							</label>
						</view>
						<view class="personal-center personal-base">
						性格开朗,很高兴为您服务，欢迎预约
						</view>
						<view class="personal-bottom personal-base">
							<u-icon name="account-fill" label="实名认证" color="#24c373" labelColor="#24c373" size="14" labelSize="12"></u-icon>
							<u-icon name="file-text-fill" label="爽约包退" color="#24c373" labelColor="#24c373" size="14" labelSize="12"></u-icon>
							<u-icon name="photo-fill" label="资格证书" color="#24c373" labelColor="#24c373" size="14" labelSize="12" @click="to('/pages/teacher/certificate',{})"></u-icon>
						</view>
					</view>
				</view>
				<view style="width:100%;height: 1100rpx;overflow-y: auto;text-align: center;padding-top: 30px;">
					<view>全部评论（{{total}}）</view>
					<view class="content_box" v-if="commentList.length > 0">
						<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
							<view class="comment-list">
								<block v-for="comment in commentList" :key="comment.id"><sh-comment :comment="comment"></sh-comment></block>
							</view>
							<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/comment_empty.png'" tipText="暂无此类评价~"></shopro-empty>
							<!-- 加载更多 -->
							<u-loadmore v-if="commentList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
						</scroll-view>
					</view>
					<view v-else>暂无评论</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import style from "../../uni_modules/uview-ui/libs/mixin/style";
import shComment from '../../pages/goods/components/sh-comment.vue';
  export default { //父vue页面传递给组件的参数获取方式
		name: 'techList',
		props: {
      dataList: {
        type: Array,
        default: []
      },
     
      goods_id: 0
		},
		watch: {

		},
		components: {
			shComment
		},
		data() {
			return {
				projectList:[],
				show: false,
				plshow:false,				
				item:{},
				total:0,
				isEmpty: false,
				typeCurrent: 'all',
				technician_id:0,
				commentList: [],
				commentTypeList: [],
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1
			}
		},
		onLoad() {
			
		},
		onShow() {},
		methods: {
			getCommentList(id){
				let that = this;
				that.loadStatus = 'loading';
				that.$http('goods.commentList', {
					pre_page: 100,
					page: that.currentPage,
					type: that.typeCurrent,
					technician_id:id
				}, '加载中...').then(res => {
					that.plshow = true
					if (res.code === 1) {
						that.commentList = [...that.commentList, ...res.data.data];
						that.total = res.data.total
						that.isEmpty = !that.commentList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			},
			detail(uid){
				uni.navigateTo({
					url: `/pages/jishi/getjishi?uid=` + uid
				}); 
			},
			viewAvatar(avatar){
				console.log(avatar)
				uni.previewImage({
					current: 0, //当前为第几张
					urls: [avatar],
					indicator: 'number',
					loop: true
				});
			},
			yulan(index){
				let imgArray = this.dataList[index].life_photos
				uni.previewImage({
					current: 0, //当前为第几张
					urls: imgArray,
					indicator: 'number',
					loop: true
				});
			},
      yuyue(item){
		this.item = item
		if(item.technician_status == 0){	
			return false;
		}
		this.goods_list(this.item.id)
		
      },
	  goods_list(teacher_id){
		  let that = this
		  that.$http('technician.getjishigoods',{category_id:that.category_id,teacher_id:teacher_id}).then(res => {
		      that.projectList = res.data
			  let goods_id = uni.getStorageSync('goods_id')
			  if(goods_id > 0){
			    for (let i = 0; i < this.projectList.length; i++) {
					
					if (this.projectList[i].id == goods_id) {
					  this.xidan(i)
					  break;
					}
			    }
			  }else {
			  	that.show = true
			  }
			  
		  });
	  },
	  plclose(){
		  this.plshow = false
	  },
	  pingjia(item){
		this.item = item
		this.currentPage = 1
		this.commentList = []
		this.getCommentList(item.id)
		
	  },
			onClick(e) {
				this.$emit('click',e)
			},
			close() {
				this.show = false;
			},
			changeInput(e) {
				console.log(e);
			},
      jump(path, parmas) {
        this.$Router.push({
          path: path,
          query: parmas
        });
      },
      xidan(index){

        let goods = this.projectList[index]
        console.log(goods)
        let that = this;
        let confirmGoodsList = [{
          goods_id: goods.id,
          goods_num: 1,
          sku_price_id: goods.sku_price[0].id,
          goods_price: goods.price
        }];
        that.jump('/pages/order/confirm', {
            goodsList: confirmGoodsList,
            technician_id: this.item.id,
            lat: uni.getStorageSync('lat'),
            lng: uni.getStorageSync('lng'),
            from: 'goods',
            coupons_id: 0,
            orderType: 'goods',
            grouponBuyType: "alone",
            grouponId: 0
        });
      },
			to(url,params){
				uni.navigateTo({
					url:url,
					data:params
				})
			}
		}
	}
</script>

<style lang="scss">
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #24c373;
		color:#24c373;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		display: flex;
		  flex-direction: column;
		  justify-content: center;
		  align-items: center;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #24c373;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.tech-image {
		width: 115rpx;
		height: 115rpx;
		border-radius: 50%;
		margin-top: 10rpx;
	}

	.border-image {
		width: 125rpx;
		height: 125rpx;
		position: absolute;
		left: 0rpx;
		top: 0rpx;
	}

	.hot-image {
		width: 30rpx;
		height: 50rpx;
		position: absolute;
		right: -20rpx;
		bottom: 8rpx;
	}

	.fire-image {
		width: 40rpx;
		height: 70rpx;
		position: absolute;
		right: -20rpx;
		top: 1rpx;
	}

	.good-view {
		position: absolute;
		left: -9rpx;
		top: 0rpx;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 20rpx;
		background: #d4b37f;
		color: #fff;
		text-align: center;
		border-top-left-radius: 18px;
	}




	.project-title {
		font-weight: bold;
		font-size: 30rpx;
		margin-top: 8rpx;
		display: flex;
		align-items: center;
	}

	.order-view {
		font-size: 24rpx;
		margin-left: 20rpx;
		color: #999;
	}

	.status-view {
		background: #24c373;
		color: #fff;
		width: 100%;
		height: 35rpx;
		line-height: 35rpx;
		text-align: center;
		border-radius: 20rpx;
		font-size: 24rpx;
		margin: 5rpx 0rpx;
	}
  .status-view1 {
    color: #999;
    width: 100%;
    height: 35rpx;
    line-height: 35rpx;
    text-align: center;
    border-radius: 20rpx;
    font-size: 24rpx;
    margin: 5rpx 0rpx;
  }

	.right-view {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
	}

	.timer {
		border-radius: 6rpx;
		//#ifndef H5
		width: 80%;
		//#endif
		background: #e3fff1;
		color: #24c373;
		font-size: 22rpx;
		font-weight: bold;
	}

	.info-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.center-col {
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 180rpx
	}

	.button-view {
		width: 140rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		background: #24c373;
		color: #fff;
		border-radius: 16rpx;
		font-size: 24rpx;
		margin-top: 16rpx;
	}
	.button-view1 {
		width: 140rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		background: #dfe2e1;
		color: #fff;
		border-radius: 16rpx;
		font-size: 24rpx;
		margin-top: 16rpx;
	}

	.center-col {
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 180rpx
	}

	.button-view {
		width: 140rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		background: #24c373;
		color: #fff;
		border-radius: 16rpx;
		font-size: 24rpx;
		margin-top: 16rpx;
		/* margin-bottom:15rpx; */
	}


	.project-image {
		width: 170rpx;
		height: 125rpx;
		border-radius: 20rpx;
		margin-top: 13rpx;
		margin-left: 10rpx;
	}

	.project-title {
		font-weight: bold;
		font-size: 30rpx;
		/* margin-top: 8rpx; */
		display: flex;
		align-items: center;
	}

	.project-tips {
		font-size: 24rpx;
		color: #999;
		height: 40rpx;
		line-height: 40rpx;
		margin: 8rpx 0rpx;
	}

	.project-price {
		display: flex;
		align-items: baseline;
		/* margin-top: 10rpx; */
	}

	.rmb-icon {
		font-size: 20rpx;
		color: red;
	}

	.price-true {
		font-size: 32rpx;
		font-weight: bold;
		color: red;
	}

	.price-false {
		font-size: 24rpx;
		color: #d9d9d9;
		text-decoration: line-through;
	}

	.num-view {
		color: #999;
		font-size: 21rpx;
		margin-top: 6rpx;
		margin-bottom: 6rpx;
		/* text-align: center; */
		margin-right: 20rpx;
	}

	.button-view2 {
		width: 140rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		background: #24c373;
		color: #fff;
		border-radius: 16rpx;
		font-size: 24rpx;
		margin-right: 10rpx;
		/* margin-top: 30rpx; */
	}

	.personal {
		/* width:96%; */
		border-radius: 30rpx;
		border: 4rpx solid #24c373;
		display: flex;
		justify-content: flex-start;
		margin-top: 20rpx;
		background: #fff;
		align-items: center;
	}

	.personal-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.personal-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.personal-center {
		font-size: 20rpx;
		color: #999;
	}

	.personal-base {
		width: 96%;
		margin-left: 2%;
		padding: 10rpx 0rpx;
	}

	.personal-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.popup-bottom {
		width: 94%;
		position: absolute;
		bottom: 0rpx;
		height: 100rpx;
		background: #fff;
		border-radius: 20rpx;
	}

	.popup-center {
		width: 96%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
	}

	.btn-push {
		margin-top: 0px;
		width: 130px;
		height: 40px;
		line-height: 40px;
		font-size: 34rpx;
	}
	.bg {
			align-items: flex-start;
		    justify-content: flex-start;
		    margin-left: -5px;
		    margin-right: -5px;
		    background: rgb(255, 255, 255);
		    border-radius: 15px;
		    margin-top: 10px;
		    padding-bottom: 15px;
	}
	.bg-list {
		align-items: flex-start;
		justify-content: flex-start;
		margin-left: -5px;
		margin-right: -5px;
		background: rgb(255, 255, 255);
		border-radius: 21px;
		margin-top: 10px;
		position: relative;
	}
	.dfix {
		display: flex;
		position: absolute;
		justify-content: space-between;
		top: 108px;
		left: 15px;
		width: 130px;
	}
</style>
